<template>
    <div class="detail">
        <!-- <img v-lazy="film.poster" class="poster" /> -->
        <van-image lazy-load :src="film.poster" fit="cover" position="center" class="poster" />
        <div class="film-detail" style="padding: 10px;">
            <div style="font-size: 18px;color: #333;margin: 10px 0;">{{ film.name }}</div>
            <div style="font-size: 12px;color: #666;margin: 5px 0;">{{ film.category }}</div>
            <div style="font-size: 12px;color: #666;margin: 5px 0;">{{ parsePremiereAt(film.premiereAt) }}上映</div>
            <div style="font-size: 12px;color: #666;margin: 5px 0;">{{ film.nation }} | {{ film.runtime }} 分钟</div>
            <div style="font-size: 14px;color: #666;margin: 15px 0;line-height: 21px;">
                {{ film.synopsis }}
            </div>
        </div>
        <h2 style="font-size: 16px;color: #666;margin: 10px;">演职人员</h2>
        <swiper :slides-per-view="4" :space-between="50" class="swiper-box">
            <swiper-slide v-for="(item, index) in film.actors" :key="index" class="swiper-slide">
                <div>
                    <!-- <div :style="{
                        background: 'url(' + item.avatarAddress + ')',
                        height: '95px',
                        width: '95px',
                        backgroundSize: 'cover',
                        backgroundPosition: 'center'
                    }"></div> -->
                    <van-image width="95px" height="95px" fit="cover" position="center" :src="item.avatarAddress" />

                    <div style="font-size: 8px;width: 95px;text-align: center;margin-top: 12px;">{{ item.name }}</div>
                    <div style="font-size: 8px;width: 95px;text-align: center;margin-top: 5px;">{{ item.role }}</div>
                </div>
            </swiper-slide>
        </swiper>
        <h2 style="font-size: 16px;color: #666;margin: 10px;">剧照</h2>
        <swiper :slides-per-view="2" :space-between="50" class="swiper-box">
            <swiper-slide v-for="(item, index) in film.photos" :key="index" class="swiper-slide"
                @click="showPreview(index)">
                <!-- <div :style="{
                    background: 'url(' + item + ')',
                    height: '120px',
                    width: '195px',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center'
                }"></div> -->
                <van-image width="195px" height="120px" fit="cover" position="center" :src="item" />
            </swiper-slide>
        </swiper>
    </div>
</template>
<script setup lang='ts'>
import { onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import type { FilmType } from '../../types/index';
import { movieDetailData } from '../../api/api';
import moment from 'moment';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';
import $bus from '@/config/eventBus';
$bus.emit("tabBarHide", false);

// 页面销毁的时候，需要打开 tabBar
onUnmounted(() => {
    $bus.emit("tabBarHide", true);
})

let router = useRoute();
let film = ref<FilmType>({
    poster: "",
    name: "",
    category: "",
    premiereAt: "",
    nation: "",
    runtime: "",
    synopsis: "",
    actors: [],
    photos: []
});
(async () => {
    let ret = await movieDetailData(router.params.id as string);
    film.value = ret.data.film;
})();
const parsePremiereAt = (value: string) => {
    return moment(parseInt(value) * 1000).format("YYYY-MM-DD");
}
const showPreview = (index: number) => {
    new ImagePreview({
        images: film.value.photos,
        startPosition: index,
        closeable: true,
        showIndicators: true
    });
}
</script>

<style scoped lang='scss'>
.detail {
    .img {
        width: 100%;
        height: 260px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>